<template>
  <Nav_bar :title="'历史记录'" />
  <div class="alarm_box">
    <div class="body_box">
      <Select_down
        :select_down="true"
        :value="{ one: '设备编号', two: '报警类型' }"
        :option_list_1="option_list_1"
        :option_list_2="option_list_2"
        @leftSelectId="leftSelectId"
        @rightSelectId="rightSelectId"
      />
      <Table :headList="headList" :bodyList="bodyList" />
    </div>
  </div>

  <Tabbar />
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { getMachineWarnApi } from '@/api/alarm/alarm'
import { getMachineListAllApi } from '@/api/machineData/machineData'
import { useRouter, useRoute } from 'vue-router'
import { SwitchingTime } from '@/utils/tools'

const $router = useRouter()

const option_list_1 = ref([{ value: '全部', text: '全部' }])

const option_list_2 = [
  { value: 5, text: '全部' },
  { value: 4, text: '库存报警' },
  { value: 3, text: '过期报警' },
  { value: 2, text: '温度报警' },
  { value: 1, text: '网络报警' },
]
const value1 = ref('')
const value2 = ref(option_list_2[0].value)
const headList = [
  { _title: '售货机编号', key: 'id' },
  { _title: '时间', key: '_date' },
  { _title: '报警类型', key: 'alarm_type' },
]
const bodyList = ref([])

/** 获取设备报警list */
const getMachineWarn = async () => {
  try {
    const res = await getMachineWarnApi({ machineId: value1.value, state: 1, status: value2.value })
    bodyList.value = []
    res.data.forEach((item) => {
      const objItem = {
        id: item.machineId,
        _date: SwitchingTime(Number(item.warnTime)),
        alarm_type: handList(item.errorType),
      }
      bodyList.value.push(objItem)
    })
  } catch (error) {
    console.log(error)
  }
}
/**
 * 处理后端返回的list
 * @return String
 */
const handList = (item) => {
  for (let i = 0; i < option_list_2.length; i++) {
    if (option_list_2[i].value === item) {
      return option_list_2[i].text
    }
  }
}

/**获取用户所有设备 */
const getMachineListAll = async () => {
  try {
    const res = await getMachineListAllApi()
    // console.log(res.data)
    res.data.forEach((item) => {
      const objItem = {
        value: item.machineId,
        text: item.machineName,
      }
      option_list_1.value.push(objItem)
    })
  } catch (error) {
    console.log(error)
  }
}
/**点击 左侧 下拉框选中返回的数据 */
const leftSelectId = (item) => {
  // console.log(item.value)
  value1.value = item.value
  getMachineWarn()
}
/**点击 右侧 下拉框选中返回的数据 */
const rightSelectId = (item) => {
  // console.log(item.value)
  value2.value = item.value
  getMachineWarn()
}

onMounted(() => {
  getMachineWarn()
})
getMachineListAll()
</script>

<style lang="scss" scoped>
.alarm_box {
  width: 100%;
  min-height: calc(100% - 148px);
  padding: 7px 14px;
  background-color: var(--defaultBgc);
  .body_box {
    max-width: 347px;
    box-sizing: border-box;
    padding: 0;
    padding-bottom: 102px;
    height: 598px;
    background-color: #fff;
  }
}
.van-nav-bar {
  height: 44px;
  line-height: 44px;
  padding: 0 9px 0 5px;
  background-color: #5ed1ae;
  .van-nav-bar__content {
    height: 44px;
    line-height: 44px;
    .van-nav-bar__title {
      color: #fff !important;
      font-weight: 400;
      font-size: var(--fs18);
    }
  }
}
</style>
